<template>
    <uni-popup ref='pop' type="bottom" :is-mask-click='false' :safe-area='false' @maskClick='tapMask'>
        <view class="box c-flex_column">
            <view class="question-box c-flex_column">
                <view class="question-item c-flex_row" :class="{'selected-item': item.mark == questionResultMark}"
                    v-for='(item, index) in choices' :key="index" @click="tapItem(item, index)">
                    <view class="title">
                        NO. {{index+1}}
                    </view>
                    <view class="value">
                        <view class="result">
                            {{item.definition}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </uni-popup>
</template>

<script>
    export default {
        props: {
            choices: {
                type: Array,
                default: function() {
                    return []
                }
            }
        },
        data: function() {
            return {
                show: false,
                question: null,
                questionIndex: -1,
            }
        },
        watch: {
            show: function(n, o) {
                if (n == o) return;
                if (n) {
                    this.open();
                } else {
                    this.close();
                }
            },

        },
        computed: {
            questionResultMark: function() {
                if (!this.question || !this.question.result) {
                    return null
                } else {
                    return this.question.result.mark
                }
            }
        },
        methods: {
            open() {
                this.$refs.pop.open();
            },
            close() {
                this.$refs.pop.close();
            },
            showChoicePop(show, question, questionIndex) {
                this.show = show;
                this.question = question;
                this.questionIndex = questionIndex;
            },
            tapMask() {
                this.showChoicePop(false);
            },
            tapItem(item, index) {
                this.$emit('confirm', {
                    item,
                    index,
                    questionIndex: this.questionIndex
                })
                this.showChoicePop(false)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        padding: 20rpx;
        background: #fff;
        border-top-left-radius: 15rpx;
        border-top-right-radius: 15rpx;

        .question-box {
            margin-bottom: 10rpx;

            .question-item {
                margin-bottom: 30rpx;
                padding: 15rpx;
                background: #fff;
                border-radius: 10rpx;
                border: 1rpx dashed #ededed;

                .title {
                    font-size: 32rpx;
                    font-weight: 700;
                    color: #333;
                    margin-right: 15rpx;
                }

                .value {
                    border-radius: 10rpx;
                    color: #333;
                    font-size: 32rpx;
                    word-wrap: break-word;
                    word-break: break-all;
                    white-space: normal;
                }
            }

            .selected-item {
                background: #d2fddd;
                color: #333;
                border: 3rpx solid #31ed50;
            }
        }
    }
</style>